<template>
    <div>
        <header class="content__title">
            <h1>
                CSS Animations
            </h1>
            <small>
                animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
            </small>
            <div class="actions">
                <a class="actions__item zmdi zmdi-trending-up" href="">
                </a>
                <a class="actions__item zmdi zmdi-check-all" href="">
                </a>
                <div class="dropdown actions__item">
                    <i class="zmdi zmdi-more-vert" data-toggle="dropdown">
                    </i>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="">
                            Refresh
                        </a>
                        <a class="dropdown-item" href="">
                            Manage Widgets
                        </a>
                        <a class="dropdown-item" href="">
                            Settings
                        </a>
                    </div>
                </div>
            </div>
        </header>
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Attention Seekers
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/1.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounce
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    flash
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    pulse
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rubberBand
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    shake
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    swing
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    tada
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    wobble
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Flippers
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/6.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    flip
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    flipInX
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    flipInY
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    flipOutX
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    flipOutY
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Light Speed
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/7.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    lightSpeedIn
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    lightSpeedOut
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Specials
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/1.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    hinge
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rollIn
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rollOut
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Bouncing Entrances
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/2.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceIn
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceInDown
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceInLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceInRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceInUp
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Bouncing Exits
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/3.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceOut
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceOutDown
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceOutLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceOutRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    bounceOutUp
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Rotating Entrances
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/8.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateIn
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateInDownLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateInDownRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateInUpLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateInUpRight
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Rotating Exits
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/9.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateOut
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateOutDownLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateOutDownRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateOutUpLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    rotateOutUpRight
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Fading Entrances
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/4.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeIn
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInDown
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInDownBig
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInLeftBig
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInRightBig
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInUp
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeInUpBig
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Fading Exits
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/5.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOut
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutDown
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutDownBig
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutLeftBig
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutRightBig
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutUp
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    fadeOutUpBig
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Zoom Entrances
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img class="animated" src="/static/demo/img/headers/sm/4.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomIn
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomInDown
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomInLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomInRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomInUp
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card animation-demo">
                    <div class="card-header">
                        <h2 class="card-title">
                            Zoom Exits
                        </h2>
                        <small class="card-subtitle">
                            Click on the buttons below to start the animation
                        </small>
                    </div>
                    <div class="card-block">
                        <img alt="" class="animated" src="/static/demo/img/headers/sm/3.png"/>
                        <div class="row">
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomOut
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomOutDown
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomOutLeft
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomOutRight
                                </button>
                            </div>
                            <div class="col-sm-6">
                                <button class="btn btn-secondary">
                                    zoomOutUp
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
export default{
    mounted() {
        function a(a) {
        a.requestFullscreen ? a.requestFullscreen() : a.mozRequestFullScreen ? a.mozRequestFullScreen() : a.webkitRequestFullscreen ? a.webkitRequestFullscreen() : a.msRequestFullscreen && a.msRequestFullscreen()
        }
        $(this.$el).on("click", "button", function(b) {
            b.preventDefault();
            var c = $(this),
                d = c.data("ma-action"),
                t = c[0].innerText;
            var a = c.parents(".card-block");
            var f = a.find("img.animated")
            f.addClass(t);
            //定时移除，或者监听事件
            setTimeout(function() {
                f.removeClass(t)
            }, 2000);
        })
    }
}
</script>